<template>
  <el-form label-position="top" :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="" prop="oldAvatar">
      <el-image
        v-if="ruleForm.oldAvatar"
        style="width: 146px; height: 146px; border-radius: 6px"
        :src="ruleForm.oldAvatar"
        fit="contain">
      </el-image>
      <el-image
        v-else
        style="width: 50px; height: 50px; border-radius: 100%;"
        src="~assets/img/avator.jpg"
        fit="contain">
      </el-image>
    </el-form-item>
    <el-form-item label="" prop="newAvatar">
      <el-upload
        list-type="picture-card"
        action="#"
        :auto-upload = "false"
        :show-file-list="false"
        :on-change="handleChange"
        accept="image/jpeg, image/png, image/jpg">
        <img v-if="imgUrl" :src="imgUrl" class="avatar">
        <i v-else class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">更换头像</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import { getInfo, updateAvatar } from 'network/admin'
  import { getPicture } from 'network/picture'

  export default {
    name: 'UpdateAvatar',
    data() {
      return {
        ruleForm: {
          oldAvatar: null,
          newAvatar: null
        },
        imgUrl: ''
      }
    },
    methods: {
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.ruleForm.newAvatar) {
              return this.$message({
                type: 'error',
                message: '请选择图片！'
              })
            }
            let formData = new FormData()
            formData.append('avatar', this.ruleForm.newAvatar.raw)
            updateAvatar(formData).then(res => {
              if (res.status === 1) return this.$message({
                type: 'error',
                message: res.message
              })
              // 更换头像成功，重新获取头像，并重置表单，将数据更新到 vuex 里 实现顶部栏里 头像 的刷新
              this.$message({
                type: 'success',
                message: '更换头像成功！'
              })
              this.getAvatar()
              this.resetForm()
            })
          } else {
            this.$message({
              type: 'error',
              message: '请选择头像！'
            })
            return false;
          }
        })
      },

      // 重置表单
      resetForm() {
        this.imgUrl = ''
      },

      // 添加图片时，拿到图片，保存在 newAvatar 里
      handleChange(file) {
        this.ruleForm.newAvatar = file
        this.imgUrl = URL.createObjectURL(file.raw)
      },

      // 获取管理员头像
      getAvatar() {
        getInfo().then(res => {
          if (res.status === 1) return this.$message({
            type: 'error',
            message: res.message
          })
          // 获取图片
          let avatar = res.data.avatar
          if (avatar) { 
            getPicture(avatar).then(res => {
              let url = URL.createObjectURL(res)
              this.ruleForm.oldAvatar = url
              this.$store.commit('updateAvatar', url)
            })
          }
        })
      }
    },
    created() {
      this.getAvatar()
    },
    beforeDestroy() {
      this.resetForm('ruleForm')
    }
  }
</script>

<style scoped>
  .el-form {
    width: 30%;
    background-color: #fff;
    padding: 20px;
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #ddd;
  }

  .el-form-item:nth-child(3) {
    margin-top: 40px;
    text-align: center;
  }
  
  /* 头像上传框样式 */
  .avatar {
    width: 146px;
    height: 146px;
    display: block;
    border-radius: 6px;
  }
</style>